<template>
  <div class="home-page-root">

    <lark-home-page header-height="60px">
      <template slot="header">
        <lark-head1 :head-data="headData" height="60px" @tabClick="tabClick" @messageClick="messageClick"
                    @userClick="userClick"></lark-head1>
      </template>

      <div class="page-body">
        <router-view/>
      </div>
    </lark-home-page>

  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref } from '@vue/composition-api'
  import mapConfig from '../../../../datas/mapConfig'
  import grassSituation from '@/views/grassFlow/grassSituation'
  import router from '@/router'

  export default {
    props: {},
    components: {
      grassSituation
    },
    setup(props, content) {

      const headData = [
        {
          icon: 'el-icon-switch-button',
          label: '草场概况',
          value: 'ccgk',
          path: '/gsit'
        },
        {
          icon: 'el-icon-switch-button',
          label: '合同管理',
          value: 'htgl',
          path: '/gcon'
        },
        {
          icon: 'el-icon-switch-button',
          label: '流转信息',
          value: 'cclz',
          path: '/gflo'
        },
        {
          icon: 'el-icon-switch-button',
          label: '系统管理',
          value: 'xtgl',
          path: '/gsys'
        }
      ]

      const data = reactive({
        bufferMapConfig: mapConfig,
        headData
      })

      const tabClick = tabData => {
        let { path } = tabData
        router.push(path)
      }

      const messageClick = () => {
      }

      const userClick = userData => {
      }

      return { ...toRefs(data), tabClick, messageClick, userClick }
    }
  }
</script>

<style scoped lang="scss">
  $full: 100%;
  .home-page-root {
    height: $full;
    width: $full;

    .page-body {
      height: $full;
      width: $full;
    }
  }
</style>
